<template>
  <div class="container">
    <!-- <div style="height: 10px"></div> -->
    <view class="all">
      <!-- 内容切换 -->
      <view class="content">
        <div v-show="indent == '维保'" class="card">
          <div style="height: 10px"></div>
          <div class="card-top">
            <div style=" text-align: center">{{ obj.repairMaintainNo }}</div>
            <div style=" text-align: center">{{ obj.launchTime }}</div>
            <div :class="obj.repairMaintainOrderState == 0 ? 'right' : 'right1'"
              style="width: 20%; text-align: center;border-radius: 4px;">
              {{ obj.repairMaintainOrderState == 0 ? "自派单" : "手工单" }}
            </div>
          </div>
          <div style="height: 10px"></div>
          <u-line color="#83AF92"></u-line>
          <div style="height: 10px"></div>
          <div style="width: 90%;margin-left: 5%;">
            <div>派单类型:{{ obj.repairMaintainType }}</div>
            <div style="height: 10px"></div>
            <div>设备名称:{{ obj.deviceName }}</div>
            <div style="height: 10px"></div>
            <div>设备编号:{{ obj.deviceNo }}</div>
            <div style="height: 10px"></div>
            <div>所属部门:{{ obj.deptName }}</div>
            <div style="height: 10px"></div>
            <div>紧急程度:{{ obj.emerDegree }}</div>
            <div style="height: 10px"></div>
            <div>故障类型:{{ obj.faultType }}</div>
            <div style="height: 10px"></div>
            <div>指定人员:{{ obj.userName }}</div>
            <div style="height: 10px"></div>
            <div>设备状态:{{ obj.deviceSate == 0 ? '正常' : obj.deviceSate == 1 ? '停用' : '' }}</div>
            <div style="height: 10px"></div>
            <div>任务描述:{{ obj.taskDesc }}</div>
            <div style="height: 10px"></div>
          </div>
          <!-- 状态为已完成时隐藏当前 -->
          <u-line v-show="obj.state == 1" color="#83AF92"></u-line>
          <div v-show="obj.state == 1" style="width: 90%;margin-left: 5%;">
            <div style="height: 10px"></div>
            <div>设备状态:已修复</div>
            <div style="height: 10px"></div>
            <div>提交时间:{{ obj.date }}</div>
            <div style="height: 10px"></div>
            <div style="display: flex;justify-content: space-between;">
              <div class="pic"></div>
              <div class="pic"></div>
            </div>
          </div>
          <div v-show="obj.state == 1" style="height: 10px"></div>
          <u-line color="#83AF92"></u-line>
          <div style="height: 10px"></div>
          <div style="margin-left: 5%;">
            任务状态:{{ obj.repairMaintainState == 0 ? "待接单" :
              obj.repairMaintainState == 1 ? '进行中' : obj.repairMaintainState == 2 ?'已完成':'无' }}
          </div>
          <div style="height: 10px"></div>
        </div>
        <div style="height: 10px;"></div>
        <div v-if="obj.repairMaintainState==2">
            <div style="height: 10px;">
            <div class="body" style="display: flex;align-items: center;justify-content: space-between;">
              <div class="img">
                <image :src="base + img1" mode="widthFix" style="width: 150px;height: 150px;"></image>
              </div>
              <div class="img">
                <image :src="base + img2" mode="widthFix" style="width: 150px;height: 150px;"></image>
              </div>
            </div>
          </div>
          </div>
        <div v-show="indent == '巡检'" class="card">
          <div style="height: 10px"></div>
          <div class="card-top">
            <div style=" text-align: center">{{ obj.inspectNo }}</div>
            <div style=" text-align: center">{{ obj.createTime }}</div>
          </div>
          <div style="height: 10px"></div>
          <u-line color="#83AF92"></u-line>
          <div style="height: 10px"></div>
          <div style="width: 90%;margin-left: 5%;">
            <div>派单类型:{{ obj.orderType }}</div>
            <div style="height: 10px"></div>
            <div>接单人:{{ obj.orderPersonName }}</div>
            <div style="height: 10px"></div>
            <div>巡检对象:{{ obj.inspectName }}</div>
            <div style="height: 10px"></div>
            <div>巡检内容:{{ obj.inspectContent }}</div>
            <div style="height: 10px"></div>
            <div>任务描述:{{ obj.taskDescription }}</div>
            <div style="height: 10px"></div>
          </div>
          <!-- 状态为已完成时隐藏当前 -->
          <u-line v-show="obj.state == 1" color="#83AF92"></u-line>
          <div v-show="obj.state == 1" style="width: 90%;margin-left: 5%;">
            <div style="height: 10px"></div>
            <div>巡检方式:二维码/</div>
            <div style="height: 10px"></div>
            <div>提交时间:2024.04.12 15:30</div>
          </div>
          <div v-show="obj.state == 1" style="height: 10px"></div>
          <u-line color="#83AF92"></u-line>
          <div style="height: 10px"></div>
          <div style="margin-left: 5%;">
            任务状态:{{ obj.workOrderState == 1 ? "待接单" : obj.workOrderState == 2 ? '进行中' : obj.workOrderState == 3 ? '已完成' : "" }}
          </div>
          
          <div style="height: 10px"></div>
        </div>
        <div v-show="indent == '知识库'" class="card">
          <div style="height: 10px"></div>
          <div class="card-top">
            <div style=" text-align: center">{{ obj.safetyTrainNo }}</div>
          </div>
          <div style="height: 10px"></div>
          <u-line color="#83AF92"></u-line>
          <div style="height: 10px"></div>
          <div style="width: 90%;margin-left: 5%;">
            <div class="items" v-show="indent == '知识库'">
              <div>试卷：{{ obj.paperName }}</div>
              <div>合格分数：{{ obj.scoreLine }}</div>
            </div>
            <div style="height: 10px;"></div>
            <div style="font-size: 14px;">限时：{{ obj.startTime }}-{{ obj.endTime }}</div>
            <div style="height: 10px;"></div>
          </div>
          <u-line color="#83AF92"></u-line>
          <div style="height: 10px"></div>
          <div style="width: 90%;margin-left: 5%;">
            <div style="display: flex;align-items: center;">
              <div class="titles">序号</div>
              <div style="width: 1%;"></div>
              <div class="titles">姓名</div>
              <div style="width: 1%;"></div>
              <div class="titles">完成情况</div>
              <div style="width: 1%;"></div>
              <div class="titles">得分</div>
            </div>
            <div v-for="(item, index) in arr" style="margin-top: 10px;">
              <div style="display: flex;align-items: center;">
                <div style="width: 24%;text-align: center;">{{ index }}</div>
                <div style="width: 1%;"></div>
                <div style="width: 24%;text-align: center;">{{ item.taskPersonName }}</div>
                <div style="width: 1%;"></div>
                <div style="width: 24%;text-align: center;">{{ item.taskState == 1 ? '已答题' : '未答题' }}</div>
                <div style="width: 1%;"></div>
                <div style="width: 24%;text-align: center;">{{ item.score }}</div>
              </div>
            </div>
          </div>
          <div style="height: 10px"></div>
          <u-line color="#83AF92"></u-line>
          <div style="height: 10px"></div>
          <div style="margin-left: 5%;">
            <div class="itemss" v-show="indent == '知识库'">
              <div>合格率：{{ obj.passRate }}</div>
              <div style="width: 10px;"></div>
              <div>答题率：{{ obj.answerRate }}</div>
            </div>
          </div>
          <div style="height: 10px"></div>
        </div>
        <div style="height: 30rpx"></div>
        <div class="status" v-show="obj.state == 1 && indent != '知识库'" @click="cancel">删除任务</div>
        <div v-show="indent == '知识库'" class="footer">
          <div style="width: 30%;"></div>
          <div class="button-footer" style="width: 30%;" @click="editExam">编辑</div>
          <div class="button-footer" style="width: 30%;" @click="cancel">取消考试</div>
        </div>
      </view>
    </view>
  </div>
</template>
<script>
import { knoewDetail, delExam } from '../api/api.js';
import request from '../../common/request.js';
export default {
  data() {
    return {
      obj: {

      },
      arr: [

      ],
      indent: '',
      img1: '',
      img2: '',
      base:'',
      request:request
    };
  },
  methods: {
    // 取消任务
    cancel() {
      uni.showModal({
        title: '取消考试',
        content: '确认要取消当前考试吗',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if (confirm) {
            delExam(this.obj.id).then(res => {
              if (res.data.code == 200) {
                uni.showToast({
                  title: res.data.msg,
                  icon: 'success',
                  mask: true
                })
                uni.navigateBack({
                  delta: 1
                });
              } else {
                uni.showToast({
                  title: res.data.msg,
                  icon: 'none',
                  mask: true
                })
              }
            })

          } else {
            uni.showToast({
              title: '取消',
              icon: 'none',
              mask: true
            })
          }
        }
      })
    },
    editExam() {
      uni.navigateTo({
        url: '/pagesPlant/index/addmain?id=1'
      })
    },
  },
  onLoad() { },
  onShow() {
    this.base = this.request.config.baseURL;
    this.indent = uni.getStorageSync('pageIndent');
    this.obj = uni.getStorageSync('mainDetail');
    if(this.obj.scenePhoto!=null){
      this.img1 = this.obj.scenePhoto.split(',')[0];
      this.img2 = this.obj.scenePhoto.split(',')[1];
    }
   
    console.log(this.img1,this.img2,'img');
    
    console.log(
      this.obj, 'obj'
    );
    if (this.indent == '知识库') {
      knoewDetail(this.obj.id).then(res => {
        console.log(res.data, '安全培训详情');
        if (res.data.code == 200) {
          this.arr = res.data.data;
        } else {
          this.arr = [];
        }
      })
    }
  },
};
</script>
<style lang="scss">
.body {
    width: 90%;
    margin-left: 5%;
}

.img {
    width: 150px;
    height: 150px;
}
.container {
  height: 100vh;
  width: 100vw;
  background: #e3ede2;
  color: #1a512c;
  overflow-y: scroll;
}

.head-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.activite {
  border-bottom: 2px solid #1a512c;
}

.card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #b9e2c7;
  font-size: 14px;

  .card-top {
    //   font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}

.items {
  display: flex;
  align-items: center;
  // width: 90%;
  // margin-left: 5%;
  justify-content: space-between;
  font-size: 14px;
}

.itemss {
  display: flex;
  align-items: center;
  // width: 90%;
  // margin-left: 5%;
  font-size: 14px;
}

.table {
  width: 90%;
  margin-left: 5%;
}

.status {
  color: #fff;
  background: #EE5555;
  width: 95%;
  margin-left: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 5px;
}

.right {
  background: #FDBD18;
  color: #fff;

}

.right1 {
  background: #50AB18;
  color: #fff;
}

.pic {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.titles {
  width: 24%;
  text-align: center;
  color: #1A512C;
  font-weight: 700;
  font-size: 14px;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: 5%;
}

.button-footer {
  width: 48%;
  height: 50px;
  background: #46A164;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  border-radius: 10px;
}

.button-footers {
  width: 48%;
  height: 50px;
  background: #C34843;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  border-radius: 10px;
}
</style>